<template>
  <div class="goods-item">
    <div class="goods-img">
      <img :src="goodsItem.show.img" alt="" @load="imgLoad">
    </div>
    <div class="goods-info">
      <p>{{goodsItem.title}}</p>
      <div class="box">
        <span class="info-price">{{goodsItem.price}}</span>
        <img src="~assets/img/common/collect.svg" alt="">
        <span class="info-cfav">{{goodsItem.cfav}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsListItem",
  props:{
    goodsItem:{
      type:Object,
      default(){
        return{}
      }
    }
  },
  methods:{
    imgLoad(){
      this.$bus.$emit('itemImgLoad')
    }
  }
}
</script>

<style scoped>
.goods-item{
  width: 47%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goods-img{
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
}
.goods-img img{
  width: 100%;
}
.goods-info{
  padding: 5px 0;
}
.goods-info p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
  font-size: 14px;
  padding: 0 2px 0;
}
.box{
  display: flex;
  justify-content: center;
}
.box .info-price{
  color: var(--color-high-text);
}
.box img{
  width:15px ;
  margin: 0 0 0 6px;
}
</style>
